<template>
	<view class="message">
		<view class="message-head">
		</view>
		<view class="message-main">
			<view class="message-navbar">
				<view class="bottoms" :class="{bt:toclass === index}" v-for="(item,index) in list" :key="index"
					@tap="cls(index)">
					{{item.name}}
				</view>
			</view>
			<view class="main-card" @tap="goliuyan">
				<view class="content-card">
					<uni-card title="管理员" extra="联系留言" thumbnail="/static/img/admin.svg">
						<text>欢迎各位对该平台提出宝贵意见</text>
					</uni-card>
				</view>
				<view class="" v-if="this.role == 'student'">
					<view class="message-content" @tap="gomage()">
						<stucard v-if="sx" ref="a" :username="username"></stucard>
					</view>
				</view>
				<view class="" v-if="this.role == 'enterprise'">
					<view class="message-content" @tap="gomage()">
						<qycard v-if="sx" ref="a" :username="username"></qycard>
					</view>
				</view>
				<view class="">
					<!-- <view class="message-content" @tap="gomage()">企业
						<mycard v-if="sx" ref="a" :username="username"></mycard>
					</view> -->
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import Cookies from "js-cookie"
	import qycard from "@/components/message/qycard.vue"
	import stucard from "@/components/message/stucard.vue"
	export default {
		data() {
			return {
				role:'',
				sx: '',
				toclass: 0,
				username: 'sss',
				list: [{
						id: 1,
						name: '消息'
					},
					// {
					// 		id: 2,
					// 		name: '任务'
					// 	}
				]
			}
		},
		components: {
			qycard,
			stucard
		},
		computed:{
			// role(){
			// 	return uni.getStorageSync("userlist")[0].role
			// }
		},
		
		mounted() {
			if(uni.getStorageSync("userlist")){
				this.role = uni.getStorageSync("userlist")[0].role
			}else{
				console.log("111");
			}
			
		},
		onShow() {
			this.sx = false;
			this.$nextTick(() => {
				this.sx = true;
			})
			// const role = uni.getStorageSync("userlist")[0].role
			// const username = Cookies.get('username')
			// console.log(role);
			// if(role === 'student'){
			// 	uni.navigateTo({
			// 		url:'/pages/message/qiyemsg'
			// 	})
			// }else{
			// 	uni.navigateTo({
			// 		url:'/pages/login/login'
			// 	})

			// }
		},
		methods: {

			cls(index) {
				this.toclass = index
			},
			gomage() {
				this.$refs.a.put();
			},
			goliuyan() {
				uni.navigateTo({
					url: '/pages/message/liuyan'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.message {
		width: 100%;
		height: 100%;

	}

	.message-head {
		width: 100%;
		height: 80rpx;
		background: url(../../static/img/circle-scatter-haikei.svg) no-repeat;
	}

	.message-main {
		display: flex;
	}

	.message-navbar {
		width: 25%;
		height: 80vh;
		background-color: wheat;
		text-align: center;
		padding-top: 20rpx;
		background: linear-gradient(#999999 0%, white 70%);

		.bottoms {
			padding-right: 10px;
			margin: 0 0px 10px 10px;
			height: 80rpx;
			width: 100%;
			line-height: 80rpx;

		}

		.bt {
			background-color: #669999;
			font-weight: bold;
			color: #003366;
			border-left: 5px solid black;
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;

		}
	}

	.main-card {
		width: 100%;
		height: 100%;
	}

	.message-content {
		width: 100%;
		height: 100%;


	}
</style>
